

/**
 * @description delete image menu
 * @author wangfupeng
 */

import { IButtonMenu, IDomEditor, DomEditor, t, SlateTransforms } from '@wangeditor/editor'
import { DavinciBlockImage } from '../custom-types.ts'

class ImageBottom implements IButtonMenu {
  readonly title = '底部对齐'
  readonly iconSvg = '<svg t="1723427780059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5235" width="200" height="200"><path d="M891.4 842.7c0 17.8-14.6 32.4-32.4 32.4H164.7c-17.8 0-32.4-14.6-32.4-32.4 0-17.8 14.6-32.4 32.4-32.4H859c17.8 0 32.4 14.6 32.4 32.4z" fill="#040000" p-id="5236"></path><path d="M546.1 349.2v364.2c0 16.5 13.5 30 30 30h240c16.5 0 30-13.5 30-30V349.2c0-16.5-13.5-30-30-30h-240c-16.5 0-30 13.5-30 30zM417.7 209.2v474.2h-180V209.2h180m30-60h-240c-16.5 0-30 13.5-30 30v534.2c0 16.5 13.5 30 30 30h240c16.5 0 30-13.5 30-30V179.2c0-16.5-13.5-30-30-30z" p-id="5237"></path></svg>'
  readonly tag = 'button'

  getValue(editor: IDomEditor): string | boolean {
    // 无需获取 val
    return ''
  }

  isActive(editor: IDomEditor): boolean {
    // 无需 active
    return false
  }

  isDisabled(editor: IDomEditor): boolean {
    if (editor.selection == null) return true

    const imageNode = DomEditor.getSelectedNodeByType(editor, 'davinci-image')
    if (imageNode == null) {
      // 选区未处于 image node ，则禁用
      return true
    }
    return false
  }

  exec(editor: IDomEditor, value: string | boolean) {
    if (this.isDisabled(editor)) return
    const selectedImageNode = DomEditor.getSelectedNodeByType(editor, 'davinci-image')
    if (selectedImageNode == null) return
    const nodeData = selectedImageNode as DavinciBlockImage
    const style = nodeData.style
    const newStyle = {
      ...style,
      verticalAlign: 'bottom'
    }
    SlateTransforms.setNodes(editor, { ...nodeData, style: newStyle }, {
      match: n => DomEditor.checkNodeType(n, 'davinci-image')
    })
  }
}


export default ImageBottom

